<template>
  <div class="doing scrollbar">
    <!-- <div class="timer-range fss pa" style="top:0;right:16px;line-height:16px;">
      <div class="tag" style="padding:" :class="flag?'active':''" @click="flag=1">好评</div>
      <div class="tag" style="padding:" :class="!flag?'active':''" @click="flag=0">差评</div>
    </div> -->
    <!-- <vue-seamless-scroll
      :data="list"
      :class-option="seamlessScrollOption"
      style="
        width: 100%;
        height: 100%;
        max-width: 100%;
        min-width:100%;
      "
    > -->
    <div
      class="item"
      v-for="(item, index) in list"
      :key="index"
      :title="`${item.time}-${item.people1}-${item.content}`"
    >
      <span class="col1">{{ item.time }}</span>
      <span class="col2" ref="RepairName"
        >{{ item.dept || "无" }}-{{ item.people1 }}</span
      >
      <span class="col3" ref="UseHourseText"
        >{{ item.people2 }}：{{ item.content }}</span
      >
    </div>
    <!-- </vue-seamless-scroll> -->
  </div>
</template>

<script>
import { calcTimeDiffFormatter } from "../../../utils";
export default {
  name: "box8",
  data() {
    return {
      list: [],
      flag: 1,
      timer: null, //切换定时器
    };
  },
  mounted() {
    this.refresh();
    // this.initItemSpan()
    // setInterval(this.refresh, 10 * 1000);
    // this.setTimer()
  },
  methods: {
    initItemSpan() {
      // return
      // if(!this.$refs.RepairName){
      //   return setTimeout(()=>{
      //      this.initItemSpan()
      //   },300)
      // }
      // const RepairNameList=this.$refs.RepairName
      // const UseHourseTextList=this.$refs.UseHourseText
      // let RepairNameMax=0,UseHourseTextMax=0
      // RepairNameList.forEach(i=>RepairNameMax=i.offsetWidth>RepairNameMax?i.offsetWidth:RepairNameMax)
      // UseHourseTextList.forEach(i=>UseHourseTextMax=i.offsetWidth>UseHourseTextMax?i.offsetWidth:UseHourseTextMax)
      // RepairNameList.forEach(i=>i.style=`width:${RepairNameMax}px;flex:0 0 ${RepairNameMax}px;`)
      // UseHourseTextList.forEach(i=>i.style=`width:${UseHourseTextMax}px;flex:0 0 ${UseHourseTextMax}px;`)
    },
    async refresh() {
      const res = await this.$http.get(
        `/api/RepairReport/RepairLargeScreenModelFList?flag=${this.flag}`
      );
      this.list = res.map((v) => ({
        ...v,
        time: calcTimeDiffFormatter(v.EvaluationerTime),
        content: v.Evaluation,
        people1: v.EvaluationerName,
        people2: v.RepairName,
        dept: v.dept || "普外科",
      }));
    },
    setTimer() {
      this.timer = setInterval(() => {
        this.flag = this.flag ? 0 : 1;
      }, 15000);
    },
  },
  computed: {
    seamlessScrollOption() {
      return {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },
  watch: {
    flag() {
      this.refresh();
      clearInterval(this.timer);
      // this.setTimer()
      // this.initItemSpan()
      this.$emit("flagChange", this.flag);
      this.$forceUpdate();
    },
  },
};
</script>

<style scoped>
.item {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  height: 30px;
  line-height: 30px;
  display: flex;
  flex: 1;
  padding-right: 5px;
  color: #fff;
}

.col1,
.col2,
.col3 {
  flex: 1 !important;
}
.col3 {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
</style>